<template>
  <a-modal
    :title="`用户工资结构`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handlePayStructureOk"
    @cancel="()=>{$emit('cancel')}"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 20 } }" :selfUpdate="true">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item label="总薪资">
          <a-input
            disabled
            v-decorator="['pay', { rules: [{ required: true, message: '总薪资不能为空' }] }]"
            placeholder="请输入总薪资"
          />
        </a-form-item>
        <a-form-item label="基础薪资">
          <a-input-number
            @change="(e) => handleChange(e, 'base')"
            v-decorator="['base', { rules: [{ required: true, message: '基础薪资不能为空' }] }]"
            placeholder="请输入基础薪资"
          />
        </a-form-item>
        <a-form-item label="岗位补贴">
          <a-input-number
            @change="(e) => handleChange(e, 'quarters')"
            v-decorator="['quarters', { rules: [{ required: true, message: '岗位补贴不能为空' }] }]"
            placeholder="请输入岗位补贴"
          />
        </a-form-item>
        <a-form-item label="绩效薪资">
          <a-input-number
            @change="(e) => handleChange(e, 'performance')"
            v-decorator="['performance', { rules: [{ required: true, message: '绩效薪资不能为空' }] }]"
            placeholder="请输入绩效薪资"
          />
        </a-form-item>
        <!-- <a-form-item label="餐费补贴">
          <a-input-number
            @change="(e) => handleChange(e, 'meal')"
            v-decorator="['meal', { rules: [{ required: true, message: '餐费补贴不能为空' }] }]"
            placeholder="请输入餐费补贴"
          />
        </a-form-item> -->
        <a-form-item label="住房补贴">
          <a-input-number
            @change="(e) => handleChange(e, 'housing')"
            v-decorator="['housing', { rules: [{ required: true, message: '住房补贴不能为空' }] }]"
            placeholder="请输入住房补贴"
          />
        </a-form-item>
        <a-form-item label="加班补贴">
          <a-input-number
          @change="(e) => handleChange(e, 'overtime')"
            v-decorator="['overtime', { rules: [{ required: true, message: '加班补贴不能为空' }] }]"
            placeholder="请输入加班补贴"
          />
        </a-form-item>
        <a-form-item label="所属银行">
          <a-input
            v-decorator="['bankName', { rules: [{ required: true, message: '所属银行不能为空' }] }]"
            placeholder="请输入所属银行"
          />
        </a-form-item>
        <a-form-item label="银行卡号">
          <a-input
            v-decorator="['bankCard', { rules: [{ required: true, message: '银行卡号不能为空' }] }]"
            placeholder="请输入银行卡号"
          />
        </a-form-item>
        <a-form-item label="公积金">
          <a-input-number
            v-decorator="['accumulationFund', { rules: [{ required: true, message: '公积金不能为空' }] }]"
            placeholder="请输入公积金"
          />
        </a-form-item>
        <a-form-item label="社保">
          <a-input-number
            v-decorator="['socialSecurity', { rules: [{ required: true, message: '社保不能为空' }] }]"
            placeholder="请输入社保"
          />
        </a-form-item>
        
        
        
        <!-- <a-form-item label="个税">
          <a-input-number
            v-decorator="['tax', { rules: [{ required: true, message: '个税不能为空' }] }]"
            placeholder="请输入个税"
          />
        </a-form-item> -->
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import cloneDeep from 'lodash.clonedeep'
import { userPayGet, userPayUpdate } from '@/api/login'
import { eachAdd } from '@/utils/calulate'

const fields = [
  'base',
  'quarters',
  'performance',
  'meal',
  'housing',
  'overtime',
  'pay',
  'bankName',
  'bankCard',
  'accumulationFund',
  'socialSecurity',
  'tax',
]
export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    userId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
      loading: false,
    }
  },

  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))
  },
  watch: {
    userId: function (n) {
      if (n) {
        this.getInfo(n)
      } else {
        this.clearInfo()
      }
    },
  },
  methods: {
    getInfo(a_uid) {
      let self = this
      self.loading = true
      userPayGet({ userId: a_uid })
        .then((res) => {
          if (res.data && res.data.infoJson) {
            let data = JSON.parse(res.data.infoJson)
            self.form.setFieldsValue({
              ...data,
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    clearInfo() {
      fields.forEach(v=>{let data = new Object; data[v] = 0;this.form.setFieldsValue(data)})
    },
    handleChange(a_val, a_str) {
      let data = this.form.getFieldsValue(['base', 'quarters', 'performance', 'meal', 'housing', 'overtime'])
      data[a_str] = a_val
      let { base = 0, quarters = 0, performance = 0, meal = 0, housing = 0, overtime = 0 } = data
      let pay = eachAdd([base,quarters,performance,meal,housing, overtime])
      this.form.setFieldsValue({pay})
    },
    handlePayStructureOk() {
      const form = this.form
      this.loading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          let data = {userId: this.userId, infoJson:values}
          userPayUpdate(data)
            .then((res) => {
              this.$emit('ok')
            }).finally(()=>{
              this.loading = false
            })
        } else {
          this.loading = false
        }
      })
    },
  },
  computed: {},
}
</script>
<style lang="less" scoped>
/deep/ .ant-input-number {
  width: 100%;
}
</style>
